<template >
  <div class="flex auto" style="padding:20px">
    <!-- 民用 -->
    <span v-show='usertypestate'>
      <input type="checkbox" v-model="equipmentinspection.certificate" :false-value='0' :true-value='1'class="magic-checkbox" id="certificate">
      <label for="certificate">询问用户是否有安装验收合格证
      <span v-if='equipmentinspection.certificate'>**是</span><span v-else>**否</span></label>
    </span>
    <span v-show='usertypestate'>
      <input type="checkbox" v-model="equipmentinspection.change" :false-value='0' :true-value='1' class="magic-checkbox" id="change">
      <label for="change">询问用户安装燃气具后是否改动
      <span v-if='equipmentinspection.change'>**是</span><span v-else>**否</span></label>
    </span>
    <span v-show='usertypestate'>
      <input type="checkbox" v-model="equipmentinspection.register" :false-value='0' :true-value='1' class="magic-checkbox" id="register">
      <label for="register">询问用户购气所用设备是否登记
      <span v-if='equipmentinspection.register'>**是</span><span v-else>**否</span></label>
    </span>
    <span v-show='usertypestate'>
       <input type="checkbox" v-model="equipmentinspection.gasenvironment" :false-value='0' :true-value='1' class="magic-checkbox" id="gasenvironment">
       <label for="gasenvironment">询问用户是否改变燃气具用气环境
       <span v-if='equipmentinspection.gasenvironment'>**是</span><span v-else>**否</span></label>
     </span>
    <span v-show='usertypestate'>
       <input type="checkbox" v-model="equipmentinspection.circuit" :false-value='0' :true-value='1' class="magic-checkbox" id="circuit">
       <label for="circuit">询问用户是否改变燃气具供电电路
       <span v-if='equipmentinspection.circuit'>**是</span><span v-else>**否</span></label>
     </span>
     <span >
       <input type="checkbox" v-model="equipmentinspection.gasmeteroperation" :false-value='0' :true-value='1'class="magic-checkbox" id="gasmeteroperation">
       <label for="gasmeteroperation">气表运行正常
       <span v-if='equipmentinspection.gasmeteroperation'>**是</span><span v-else>**否</span></label>
     </span>
     <!-- 室外立管泄露报警 -->
     <span v-show='usertypestate'>
       <input type="checkbox" v-model="equipmentinspection.outdoorriser" :false-value='0' :true-value='1'class="magic-checkbox" id="outdoorriser">
       <label for="outdoorriser">室外立管泄露报警
       <span v-if='equipmentinspection.outdoorriser'>**是</span><span v-else>**否</span></label>
     </span>
     <!-- 引入管 泄露报警-->
     <span v-show='usertypestate'>
       <input type="checkbox" v-model="equipmentinspection.introductiontube" :false-value='0' :true-value='1'class="magic-checkbox" id="introductiontube">
       <label for="introductiontube">引入管 泄露报警
       <span v-if='equipmentinspection.introductiontube'>**是</span><span v-else>**否</span></label>
     </span>
     <!-- 室内支管泄露报警-->
     <span v-show='usertypestate'>
       <input type="checkbox" v-model="equipmentinspection.interiorbranchpipe" :false-value='0' :true-value='1'class="magic-checkbox" id="interiorbranchpipe">
       <label for="interiorbranchpipe">室内支管泄露报警
       <span v-if='equipmentinspection.interiorbranchpipe'>**是</span><span v-else>**否</span></label>
     </span>
      <!-- 室内阀门泄露报警-->
     <span v-show='usertypestate'>
       <input type="checkbox" v-model="equipmentinspection.indoorvalve" :false-value='0' :true-value='1'class="magic-checkbox" id="indoorvalve">
       <label for="indoorvalve">室内阀门泄露报警
       <span v-if='equipmentinspection.indoorvalve'>**是</span><span v-else>**否</span></label>
     </span>

     <!-- 热水器 -->
     <div v-show='usertypestate' class="row app-input">
       <div class="col-xs-6 check-row">
         <input type="checkbox" v-model="equipmentinspection.f_waterheater" :false-value='0' :true-value='1' class="magic-checkbox" id="f_waterheater">
         <label for="f_waterheater">热水器 </label>
       </div>
       <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_waterheater'>
         <label for="f_waterheater_quantity" class="text-nowrap">数量 </label>
         <input  type="text" class="span"v-model="equipmentinspection.f_waterheater_quantity" id="f_waterheaternums" placeholder="输入个数">
       </div>
     </div>
      <!-- 壁挂炉 -->
      <div v-show='usertypestate' class="row app-input">
        <div class="col-xs-6 check-row">
          <input type="checkbox" v-model="equipmentinspection.f_wallhangboiler" :false-value='0' :true-value='1' class="magic-checkbox" id="f_wallhangboiler">
          <label for="f_wallhangboiler">壁挂炉 </label>
        </div>
        <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_wallhangboiler'>
          <label for="f_wall_hungboiler_quantity" class="text-nowrap">数量 </label>
          <input  type="text" class="span"v-model="equipmentinspection.f_wall_hungboiler_quantity" id="f_wallhangboilernums" placeholder="输入个数">
        </div>
      </div>
       <!-- 灶具 -->
       <div v-show='usertypestate' class="row app-input">
         <div class="col-xs-6 check-row">
           <input type="checkbox" v-model="equipmentinspection.f_homekitchen" :false-value='0' :true-value='1' class="magic-checkbox" id="f_homekitchen">
           <label for="f_homekitchen">灶具 </label>
         </div>
         <div class="col-xs-6 flex-row"v-if='equipmentinspection.f_homekitchen'>
           <label for="f_homekitchen_quantity" class="text-nowrap">数量 </label>
           <input  type="text" class="span"v-model="equipmentinspection.f_homekitchen_quantity" id="f_waterheaternums" placeholder="输入个数">
         </div>
       </div>

    <!-- 非民用 -->
    <span v-show='!usertypestate'>****天然气气密性检查****</span></label>
    <span v-show='!usertypestate'>
      <input type="checkbox" v-model="equipmentinspection.leakage" :false-value='0' :true-value='1' class="magic-checkbox" id="leakage">
      <label for="leakage">泄露
      <span v-if='equipmentinspection.leakage'>**是</span><span v-else>**否</span></label>
    </span>
    <span v-show='!usertypestate'>
      <input type="checkbox" v-model="equipmentinspection.maintenancetreatment" :false-value='0' :true-value='1' class="magic-checkbox" id="maintenancetreatment">
      <label for="maintenancetreatment">转入维修处理
      <span v-if='equipmentinspection.maintenancetreatment'>**是</span><span v-else>**否</span></label>
    </span>
    <span v-show='!usertypestate'>
       <input type="checkbox" v-model="equipmentinspection.gasseals" :false-value='0' :true-value='1' class="magic-checkbox" id="gasseals">
      <label for="gasseals"> 气表铅封
       <span v-if='equipmentinspection.gasseals'>**是</span><span v-else>**否</span></label>
     </span>
    <span v-show='!usertypestate'>
      <input type="checkbox" v-model="equipmentinspection.sealassembly"  :false-value='0' :true-value='1' class="magic-checkbox" id="sealassembly">
      <label for="sealassembly">总承铅封
      <span v-if='equipmentinspection.sealassembly'>**是</span><span v-else>**否</span></label>
    </span>
    <span v-show='!usertypestate'>
       <input type="checkbox" v-model="equipmentinspection.boltseal" :false-value='0' :true-value='1' class="magic-checkbox" id="boltseal">
      <label for="boltseal"> 螺栓铅封
       <span v-if='equipmentinspection.boltseal'>**是</span><span v-else>**否</span></label>
     </span>

    <!-- 采暖炉 -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_heatingboiler" :false-value='0' :true-value='1' class="magic-checkbox" id="f_heatingboiler">
        <label for="f_heatingboiler">采暖炉 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_heatingboiler'>
        <label for="f_heatingboiler_tonnage" class="text-nowrap">吨位 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_heatingboiler_tonnage" id="f_heatingboiler_tonnage" placeholder="输入吨位">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_heatingboiler'>
        <label for="f_heatingboiler_quantity" class="text-nowrap">台数 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_heatingboiler_quantity" id="f_heatingboiler_quantity" placeholder="输入台数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_heatingboiler'>
        <label for="f_heatingboiler_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_heatingboiler_brand" id="f_heatingboiler_brand" placeholder="输入品牌">
      </div>
    </div>
<!-- 茶水炉 -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_teaboiler" :false-value='0' :true-value='1' class="magic-checkbox" id="f_teaboiler">
        <label for="f_teaboiler">茶水炉 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_teaboiler'>
        <label for="f_teaboiler_tonnage" class="text-nowrap">吨位 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_teaboiler_tonnage" id="f_teaboiler_tonnage" placeholder="输入吨位">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_teaboiler'>
        <label for="f_teaboiler_quantity" class="text-nowrap">台数 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_teaboiler_quantity" id="f_teaboiler_quantity" placeholder="输入台数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_teaboiler'>
        <label for="f_teaboiler_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_teaboiler_brand" id="f_teaboiler_brand" placeholder="输入品牌">
      </div>
    </div>
<!--模块炉  -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_moduleboiler" :false-value='0' :true-value='1' class="magic-checkbox" id="f_moduleboiler">
        <label for="f_moduleboiler">模块炉 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_moduleboiler'>
        <label for="f_moduleboiler_tonnage" class="text-nowrap">吨位 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_moduleboiler_tonnage" id="f_moduleboiler_tonnage" placeholder="输入吨位">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_moduleboiler'>
        <label for="f_moduleboiler_quantity" class="text-nowrap">台数 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_moduleboiler_quantity" id="f_moduleboiler_quantity" placeholder="输入台数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_moduleboiler'>
        <label for="f_moduleboiler_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_moduleboiler_brand" id="f_moduleboiler_brand" placeholder="输入品牌">
      </div>
    </div>

<!-- 壁挂炉 -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_wallhangboiler" :false-value='0' :true-value='1' class="magic-checkbox" id="f_wallhangboiler">
        <label for="f_wallhangboiler">壁挂炉 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_wallhangboiler'>
        <label for="f_wall_hungboiler_tonnage" class="text-nowrap">吨位 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_wall_hungboiler_tonnage" id="f_wall_hungboiler_tonnage" placeholder="输入吨位">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_wallhangboiler'>
        <label for="f_wall_hungboiler_quantity" class="text-nowrap">台数 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_wall_hungboiler_quantity" id="f_wall_hungboiler_quantity" placeholder="输入台数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_wallhangboiler'>
        <label for="f_wall_hungboiler_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_wall_hungboiler_brand" id="f_wall_hungboiler_brand" placeholder="输入品牌">
      </div>
    </div>

<!-- 热水器 -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_waterheater" :false-value='0' :true-value='1' class="magic-checkbox" id="f_waterheater">
        <label for="f_waterheater">热水器 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_waterheater'>
        <label for="f_waterheater_tonnage" class="text-nowrap">吨位 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_waterheater_tonnage" id="f_waterheater_tonnage" placeholder="输入吨位">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_waterheater'>
        <label for="f_waterheater_quantity" class="text-nowrap">台数 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_waterheater_quantity" id="f_waterheater_quantity" placeholder="输入台数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_waterheater'>
        <label for="f_waterheater_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_waterheater_brand" id="f_waterheater_brand" placeholder="输入品牌">
      </div>
    </div>

<!-- 家用灶 -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_homekitchen" :false-value='0' :true-value='1' class="magic-checkbox" id="f_homekitchen">
        <label for="f_homekitchen">家用灶 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_homekitchen'>
        <label for="f_homekitchen_tonnage" class="text-nowrap">吨位 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_homekitchen_tonnage" id="f_homekitchen_tonnage" placeholder="输入吨位">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_homekitchen'>
        <label for="f_homekitchen_quantity" class="text-nowrap">台数 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_homekitchen_quantity" id="f_homekitchen_quantity" placeholder="输入台数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_homekitchen'>
        <label for="f_homekitchen_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_homekitchen_brand" id="f_homekitchen_brand" placeholder="输入品牌">
      </div>
    </div>
    <!-- 火眼 -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_fiereye" :false-value='0' :true-value='1' class="magic-checkbox" id="f_fiereye">
        <label for="f_fiereye">火眼 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_fiereye'>
        <label for="f_fiereye_quantity" class="text-nowrap">个数 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_fiereye_quantity" id="f_fiereye_quantity" placeholder="输入个数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_fiereye'>
        <label for="f_fiereye_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_fiereye_brand" id="f_fiereye_brand" placeholder="输入品牌">
      </div>
    </div>
    <!--蒸车  -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_steamcars" :false-value='0' :true-value='1' class="magic-checkbox" id="f_steamcars">
        <label for="f_steamcars">蒸车 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_steamcars'>
        <label for="f_steamcars_quantity" class="text-nowrap">个数 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_steamcars_quantity" id="f_steamcars_quantity" placeholder="输入个数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_steamcars'>
        <label for="f_steamcars_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_steamcars_brand" id="f_steamcars_brand" placeholder="输入品牌">
      </div>
    </div>
    <!-- 小火眼 -->
    <div v-show='!usertypestate' class="row app-input">
      <div class="col-xs-6 check-row">
        <input type="checkbox" v-model="equipmentinspection.f_smallfireeye" :false-value='0' :true-value='1' class="magic-checkbox" id="f_smallfireeye">
        <label for="f_smallfireeye">小火眼 </label>
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_smallfireeye'>
        <label for="f_smallfireeye_quantity" class="text-nowrap">个数 </label>
        <input  type="text" class="span"v-model="equipmentinspection.f_smallfireeye_quantity" id="f_smallfireeye_quantity" placeholder="输入个数">
      </div>
      <div class="col-xs-6 flex-row" v-if='equipmentinspection.f_smallfireeye'>
        <label for="f_smallfireeye_brand" class="text-nowrap">品牌 </label>
        <input  type="text" class="span" v-model="equipmentinspection.f_smallfireeye_brand" id="f_smallfireeye_brand" placeholder="输入品牌">
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: ['user'],
  title:'设备检查',
  data() {
    return {
      model:{},
      usertypestate: false,
      equipmentinspection: {
        certificate: 0,
        change: 0,
        register: 0,
        gasenvironment: 0,
        circuit: 0,
        leakage: 0,
        maintenancetreatment: 0,
        gasseals: 0,
        sealassembly: 0,
        boltseal: 0,
        gasmeteroperation: 0,
        f_waterheater: 0,
        f_kitchen: 0,
        f_kitchen: 0

      }
    }
  },
  watch: {
  user:{
      handler:function (val,oldVal) {
          // this.model = Object.assign({}, this.model, this.user)
          this.equipmentinspection = Object.assign({}, this.equipmentinspection, this.user)
      },
      deep:true
  },
  'equipmentinspection.f_usertype' (val) {
    if (val === '非民用') {
      this.usertypestate = false
    } else {
      this.usertypestate =true
    }
  }
},
ready() {
  // this.model = Object.assign({}, this.model, this.user)
  this.equipmentinspection = Object.assign({}, this.equipmentinspection, this.user)
}
}
</script>

<style lang="css">
  .check-row .magic-radio + label:before, .check-row .magic-checkbox + label:before {
    top: 8px;
  }
</style>
